<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡切换</title>


<style type="text/css">
*{
margin:0;
padding:0;
overflow:hidden;}
body{
font-family:微软雅黑}
.box{
width:306px;
margin:10px auto
}
ul{
list-style:none}
ul.mainmenu li{
float:left;
	background:#fefefe;
	background:-webkit-gradient(linear,left top,left bottom, from(#ffffff), to(#eeeeee));
	border:1px solid #ccc;
	padding:5px 0;
	width:100px;
	text-align:center;
	
	cursor:pointer;
	color:#9966FF;}
.music .music,.videos .videos,.news .news{
border-bottom:none;
	background:#fff;}
.box>div{
clear:both;
	border:1px solid #ccc;
	border-top:none;
	width:304px;
	height:100px;
	padding-top:20px;
	text-align:center;font-size:14px; margin-top:-1px;
	}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="box">
		<ul class="mainmenu" :class="current">
			<li class="music" v-on:click="current='music'">音乐</li>
			<li class="videos" v-on:click="current='videos'">视频</li>
			<li class="news" v-on:click="current='news'">新闻</li>
		</ul>
		<component :is="current"></component>
	</div>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
	el : '#example',
	data : {
		current : 'music'
	},
	//注册局部组件
	components : {
		music : {
			template : '<div>音乐内容</div>'
		},
		videos : {
			template : '<div>视频内容</div>'
		},
		news : {
			template : '<div>新闻内容</div>'
		}
	}
});
</script>













</body>
</html>